export {};

console.log(Date.now(), "时间戳");
type Record = {
  count: number;
  time: string;
};
//01定义每条数据的类型的数组
type RecordList = Record[];

//02格式化时间戳为字符串
const formatTime = (timestamp: number): string => {
  const date = new Date(timestamp);
  const hour = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();
  return `${hour}:${minutes}:${seconds}`;
};
//03获取和更新的记录添加到数组
const key = "recordList";
const getRecordList = (): RecordList => {
  // 获取现在存放的数据列表
  return localStorage.getItem(key)
    ? JSON.parse(localStorage.getItem(key) as string)
    : [];
};

const updateRecordList = () => {
  // 添加新数据
  const list = getRecordList();
  list.push({
    count: list.length + 1,
    time: formatTime(Date.now()), // 添加时间戳
  });
  localStorage.setItem(key, JSON.stringify(list)); // 更新后的记录数组转换为 JSON 字符串，并保存到本地存储的指定键名下
};
//04渲染页面
const render = () => {
  // 获取列表
  updateRecordList();

  // 更新数据
  const list = getRecordList();

  // 渲染页面
  console.log(list, "获取到的旧数据");
  const renderedList = list.map((item: any) => {
    return `第${item.count}次访问，时间${item.time}`; // 修改拼接字符串的格式
  });
  const dom = document.querySelector("#app") as Element;
  dom.innerHTML = `<li>${renderedList.join("</li><li>")}</li>`; // 修改列表渲染的格式
};
//05每次刷新页面都会重新获取并记录
render();
